<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>405 - 方法不允许</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FA8C16',
                        secondary: '#6B7280',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-method {
                animation: method 3s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .btn-shake {
                animation: shake 2s infinite;
            }
        }

        @keyframes method {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.95);
            }
        }
        
        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-2px);
            }
            20%, 40%, 60%, 80% {
                transform: translateX(2px);
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-light to-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-4xl w-full mx-auto text-center">
        <div class="relative mb-8">
            <div class="text-[clamp(120px,25vw,200px)] font-bold text-primary/10 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-0">405</div>
            <div class="relative z-10 flex flex-col items-center">
                <div class="w-32 h-32 bg-primary/10 rounded-full flex items-center justify-center mb-6 animate-method">
                    <i class="fa fa-ban text-[clamp(50px,10vw,80px)] text-primary"></i>
                </div>
                <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4 text-shadow">方法不允许</h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-secondary max-w-2xl mx-auto mb-4">请求的方法不被允许，请尝试其他操作。</p>
                <div class="bg-orange-50 border-l-4 border-primary p-4 mb-8 rounded-r-lg max-w-md w-full mx-auto">
                    <p class="text-secondary text-sm">遇到错误了，也可以联系网站运维人员处理</p>
                    <div class="flex items-center mt-2 text-primary">
                        <i class="fa fa-user-circle mr-2"></i>
                        <span>运维人员：快乐天使阿杜</span>
                    </div>
                </div>
                <div class="relative group">
                    <div class="absolute inset-0 bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 rounded-full blur opacity-70 group-hover:opacity-80 transition-all duration-500 animate-pulse-slow"></div>
                    <a href="https://www.gshnbst.cn" target="_blank" class="relative inline-flex items-center justify-center px-8 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform btn-shake group-hover:scale-105">
                        <span class="relative z-10 flex items-center">
                            <i class="fa fa-undo mr-2 transform group-hover:rotate-180 transition-transform duration-500"></i>
                            返回主页
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <footer class="mt-auto py-6 text-center text-secondary text-sm">
        <p>© 2025 版权所有 | <a href="https://www.gshnbst.cn" class="text-primary hover:underline">gshnbst.cn</a></p>
        <div class="flex justify-center items-center space-x-6 mt-2">
            <a href="https://beian.miit.gov.cn/" target="_blank" class="flex items-center">
                <p>陇ICP备2024009890号</p>
            </a>
            <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=62042202000161" target="_blank" class="flex items-center">
                <img src="../image/beian.png" alt="公安备案图标" class="w-4 h-4 mr-1">
                <p>甘公网安备 62042202000161号</p>
            </a>
        </div>
    </footer>
</body>
</html>
    